<template>
  <div class="card-face card-face-0" :class="[swipeAnimation, enterAnimation]">
    <div class="word-content">
      <h1 class="word">{{ word.text }}</h1>
      <p class="phonetic">{{ word.phonetic }}</p>
      <div class="controls-container">
        <div class="difficulty-indicator" :data-level="word.difficulty">
          难度:
          <span class="star-container">
            <i v-for="i in 5" :key="i" class="bi"
              :class="{ 'bi-star-fill': i <= word.difficulty, 'bi-star': i > word.difficulty }"></i>
          </span>
        </div>
        <button class="play-button" @click.stop="playWordAudio">
          <i class="bi bi-volume-up"></i> 播放读音
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFaceWord',
  props: {
    word: {
      type: Object,
      required: true
    },
    swipeAnimation: {
      type: String,
      default: ''
    },
    enterAnimation: {
      type: String,
      default: ''
    }
  },
  methods: {
    playWordAudio(event) {
      if (event) event.stopPropagation();
      this.$emit('play-word-audio');
    }
  }
}
</script>